<template>
	<table class="table table-hover" v-if="user">
		<caption>
			{{ user.name }} {{ user.nick ? '(' + user.nick + ')' : '' }}
		</caption>
		<tbody>
			<tr>
				<td scope="row" width="15%">
					{{ $t('ranking') }}
				</td>
				<td width="25%" class="text-center">
					{{ user.ranking }}
				</td>
				<td scope="col" width="70%" class="text-center">
					{{ $t('problems_list') }}
				</td>
			</tr>
			<tr>
				<td scope="row">
					{{ $t('submit') }}
				</td>
				<td class="text-center">
					<RouterLink class="link-color" :to="'/status?username=' + user.name">
						{{ user.submitted }}
					</RouterLink>
				</td>
				<td class="text-center">...</td>
			</tr>
			<tr>
				<td scope="row">
					{{ $t('accepted') }}
				</td>
				<td class="text-center">
					<RouterLink class="link-color" :to="'/status?result=4&username=' + user.name">
						{{ user.accepted }}
					</RouterLink>
				</td>
				<td>
					<RouterLink class="pid link-color" v-for="item in user.solvedList" :to="'/problem/' + item">
						{{ item }}
					</RouterLink>
				</td>
			</tr>
			<tr>
				<td scope="row">
					{{ $t('unsolved') }}
				</td>
				<td class="text-center">
					<RouterLink class="link-color" :to="'/status?username=' + user.name">
						{{ user.unsolved }}
					</RouterLink>
				</td>
				<td>
					<RouterLink class="pid link-color" v-for="item in user.unsolvedList" :to="'/problem/' + item">
						{{ item }}
					</RouterLink>
				</td>
			</tr>
		</tbody>
	</table>
</template>


<script type="module">
import { UserService } from '@/common/common.object'

export default {
	data() {
		return {
			user: null,
		};
	},
	created() {
		this.loadInfo(this.$route.params.id);
	},
	methods: {
		loadInfo(userId) {
			UserService.judgeInfo(this.$route.params.id).then(user => {
			this.user = Object.freeze(user);

			this.$changeTitle(user.nick);
		});
		}
	}
};
</script>


<style scoped>
caption {
	padding-top: 8px;
	padding-bottom: 8px;

	font-size: 20px;
	color: #777;
	/*text-align: left;*/
}

table {
	margin: 0 auto;
	width: 100%;
}

table>tbody>tr>td {
	padding: 0.75rem;
	vertical-align: top;

	border-top: 1px solid #ddd;
}

table>tbody>tr>td>.pid {
	padding: 0 4px;
}
</style>
